<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>支出明细</title>
</head>
<body>
    <div th:fragment="content">
        <div class="container-fluid">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2 class="h3">支出明细</h2>
                <div>
                    <button class="btn btn-primary" onclick="refreshData()">
                        <i class="fas fa-sync-alt me-1"></i> 刷新数据
                    </button>
                </div>
            </div>

            <div class="row mb-4">
                <div class="col-md-6 col-lg-3 mb-3">
                    <div class="stat-card">
                        <div class="stat-card-title">总支出</div>
                        <div class="stat-card-value" th:text="${'¥' + totalExpense}">-</div>
                    </div>
                </div>
            </div>

            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">配送员筛选</h5>
                </div>
                <div class="card-body">
                    <form id="courierFilterForm" th:action="@{/admin/expenses}" method="get" class="row">
                        <div class="col-md-4 mb-3">
                            <label for="courierId" class="form-label">配送员</label>
                            <select class="form-control" id="courierId" name="courierId">
                                <option value="">-- 所有配送员 --</option>
                                <option th:each="courier : ${couriers}"
                                        th:value="${courier.courierId}"
                                        th:text="${courier.username + ' (#' + courier.courierId + ')'}"
                                        th:selected="${param.courierId != null && param.courierId[0] == courier.courierId.toString()}">
                                </option>
                            </select>
                        </div>
                        <div class="col-md-4 mb-3 d-flex align-items-end">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-filter me-1"></i> 筛选
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0">支出明细列表</h5>
                    <div>
                        <button class="btn btn-outline-success" onclick="exportExpense()">
                            <i class="fas fa-file-export me-1"></i> 导出数据
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-container">
                        <table class="data-table">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>金额</th>
                                    <th>配送员</th>
                                    <th>订单ID</th>
                                    <th>配送地址</th>
                                    <th>描述</th>
                                    <th>时间</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr th:each="expense : ${records}" th:if="${records != null && !(records.isEmpty())}">
                                    <td th:text="${expense.transactionId}"></td>
                                    <td th:text="${'¥' + expense.amount}"></td>
                                    <td th:text="${expense.courierName + ' (#' + expense.courierId + ')'}"></td>
                                    <td th:text="${expense.orderId}"></td>
                                    <td th:text="${expense.orderAddress}"></td>
                                    <td th:text="${expense.description}"></td>
                                    <td th:text="${#temporals.format(expense.createdAt, 'yyyy-MM-dd HH:mm')}"></td>
                                </tr>
                                <tr th:if="${records == null || records.isEmpty()}">
                                    <td colspan="7" class="text-center">暂无支出记录</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <script th:inline="javascript">
            function refreshData() {
                location.reload();
            }

            function exportExpense() {
                // 导出数据功能，实际项目中可以实现为下载CSV或Excel
                alert('导出功能将在实际项目中实现');
            }

            // 在页面加载时标记当前菜单为活动状态
            document.addEventListener('DOMContentLoaded', function() {
                document.querySelectorAll('.sidebar-menu a').forEach(a => {
                    a.classList.remove('active');
                });
                document.getElementById('menu-expenses').classList.add('active');
            });
        </script>
    </div>
</body>
</html>
